<template>
  <div class="login-quick-form">
    <el-form ref="quickLoginForm" :model="loginForm" :rules="rules">
      <el-form-item prop="phone" class="user">
        <el-input v-model="loginForm.phone" name="phone" :maxlength="11" placeholder="请输入手机号" class="phone-input">
          <template slot="prefix">
            <i slot="prefix" class="el-icon-mobile-phone perfix-icon"></i>
            <span class="phone-prefix">+86</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="smCode">
        <el-input type="text" v-model="loginForm.smCode" :maxlength="6" placeholder="6位短信验证码" class="code-input">
          <i slot="prefix" class="iconfont icon-password perfix-icon"></i>
          <template slot="append">
            <el-button :loading="coding" type="primary" @click="getCode">
              {{ codeBtnDisplay }}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <div class="login-btn" @click="alyOnSubmit">登 录</div>
    </el-form>
  </div>
</template>
<script>
import { phoneReg } from '@utility/regExps.js'
import { sendSignCode } from '@api/modules/user'
export default {
  name: 'QuickForm',
  data() {
    const checkPhone = (rule, value, cb) => {
      if (!value) {
        cb(new Error('手机号不能为空'))
      } else if (phoneReg.test(value)) {
        cb()
      } else {
        cb(new Error('请输入有效的手机号'))
      }
    }
    const checkCode = (rule, val, cb) => {
      if (!val) {
        cb(new Error('验证码不能为空'))
      } else if (/^\d{6}$/.test(val)) {
        cb()
      } else {
        cb(new Error('验证码不正确'))
      }
    }
    return {
      loginForm: {
        phone: '',
        smCode: '',
      },
      rules: {
        phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
        smCode: [{ required: true, validator: checkCode, trigger: 'blur' }],
      },
      sendCodeStatus: 'init',
      coding: false,
      cutdownSec: 0,
      cutdownTimer: null,
    }
  },
  computed: {
    codeBtnDisplay() {
      if (this.sendCodeStatus === 'init') {
        return '发送验证码'
      } else if (this.sendCodeStatus === 'send') {
        return this.cutdownSec + ' 秒'
      }
      return '重新发送'
    },
  },
  methods: {
    getCode() {
      if (this.coding || this.sendCodeStatus === 'send') {
        return false
      }
      let validPhone = true
      this.$refs.quickLoginForm.validateField('phone', err => {
        validPhone = !err
      })
      if (validPhone) {
        this.coding = true
        sendSignCode(this.loginForm.phone)
          .then(res => {
            this.coding = false
            if (res.status === 200) {
              this.startCutdown()
            }
          })
          .catch(() => {
            this.coding = false
          })
      }
    },
    startCutdown() {
      this.clearCutdownTimer()
      this.sendCodeStatus = 'send'
      this.cutdownSec = 60
      this.cutdownTimer = setInterval(() => {
        this.cutdownSec--
        if (this.cutdownSec <= 0) {
          this.clearCutdownTimer()
          this.sendCodeStatus = 'retry'
        }
      }, 1000)
    },
    clearCutdownTimer() {
      if (this.cutdownTimer) {
        clearInterval(this.cutdownTimer)
      }
    },
    alyOnSubmit() {
      this.$refs.quickLoginForm.validate(valid => {
        if (!valid) {
          return
        }
        this.$emit('login', this.loginForm)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.login-quick-form {
  width: 100%;
  .perfix-icon {
    margin-left: 10px;
    color: #1b8aee;
  }
  .pwd-eye-view {
    cursor: pointer;
    display: inline-block;
    width: 50px;
    height: 100%;
    line-height: 42px;
  }
  i {
    font-size: 18px;
    line-height: 42px;
    color: #a8d2f7;
  }
  ::v-deep .el-input {
    width: 100%;
    height: 42px;
    background: #ffffff;
    border-radius: 4px;
    input {
      border-radius: 4px !important;
      height: 100%;
      padding-left: 50px;
      padding-right: 50px;
      border-color: #a8d2f7;
      &:focus {
        border-color: #1b8aee;
        box-shadow: 0px 3px 9px 1px rgba(113, 145, 181, 0.5);
      }
    }
    &.phone-input {
      input {
        padding-left: 80px;
      }
      .phone-prefix {
        padding-left: 5px;
      }
      .el-input__prefix {
        display: flex;
        align-items: center;
      }
    }
    &.code-input input {
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
    .el-input-group__append {
      color: #fff;
      background: linear-gradient(0deg, #0074f4 0%, #2099ff 100%);
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
      border-right: none;
      .el-button.is-loading {
        height: 100%;
      }
    }
  }
  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 30px;
    background: linear-gradient(0deg, #0074f4 0%, #2099ff 100%);
    border-radius: 4px;
    font-size: 18px;
    line-height: 42px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
  }
}
</style>
